<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /*去除margin和padding避免定位出现干扰*/
            /*星号代表选择所有元素*/
            margin:0px;
            padding: 0px;
        }
        #d1{
            position:absolute;
            width: 721px;/*定义宽高*/
            height:456px;
            background-repeat: no-repeat;/*图片不会平铺出现*/
            background:url(images/focus.jpg);/*图片用背景的方式展示在d1块上*/
        }
        #d2{
            position:absolute;
            width: 721px;/*定义宽高*/
            height:456px;
            background-repeat: no-repeat;/*图片不会平铺出现*/
            background:url(images/focus1.jpg);/*图片用背景的方式展示在d1块上*/
        }
        #d3{
            position:absolute;
            width: 721px;/*定义宽高*/
            height:456px;
            background-repeat: no-repeat;/*图片不会平铺出现*/
            background:url(images/focus2.jpg);/*图片用背景的方式展示在d1块上*/
        }
        #d4{
            position:absolute;
            width: 721px;/*定义宽高*/
            height:456px;
            background-repeat: no-repeat;/*图片不会平铺出现*/
            background:url(images/focus3.jpg);/*图片用背景的方式展示在d1块上*/
        }
        .i2{
            /*定义按钮大小位置*/
            width: 100px;
            height: 50px;
            position:absolute;/*绝对定位*/
            top: 50%;
            right: 0px;
            margin-top: -25px;
            font-size: 40px;/*字体大小,采用<>俩符号*/
        }
        .i1{
            /*定义按钮大小位置*/
            width: 100px;
            height: 50px;
            position:absolute;/*绝对定位*/
            top: 50%;
            left: 0px;
            margin-top: -25px;
            font-size: 40px;
        }
        #d2{
            /*定义播放顺序板块的大小位置*/
            position:absolute;/*绝对定位*/
            width:200px;
            height: 30px;
            background: none;/*无背景,理解为透明*/
            bottom: 0px;
            left:50%;
            margin-left: -100px;
            display: flex;/*横向排列,使5个点横向排列*/
        }
        #d21,#d22,#d23,#d24,#d25{
            /*定义播放顺序板块中每一个小圆圈的大小和位置*/
            width:10px;
            height: 10px;
            background: rgba(0,255,243,1.00);/*rgba四个字母代表红绿蓝透明*/
            /*这里其实使用rgb或者16进制就可以,多此一举了*/
            position: relative;/*相对定位,相对于自身未设置之前的位置*/
            margin-top: 10px;
            margin-left: 25px;
            border-radius:5px;
        }
    </style> 
    <script>
        var i=1;
        var m=800;
        window.onload=function start(){
            ti();
        }
        //window.onload代表页面加载即执行
        function ti(){
            tim=setInterval("pho()",1000);//定义一个1000毫秒执行一次的计时器,执行pho()函数
            color(i);//引用color()函数,自己写的,在下面
        }
        function pho(){
            if(i==5){
                i=0;
                }
            i=i+1;
            var a=document.getElementById("d1");
            magicti();//引入幻灯片效果
            color(i);
            if(i==5){
                i=0;
                }
            //if分支表示1000毫秒执行一次,当i等于5就是第五个图片时候i=0,下一张执行就是i+1,即第一张
        }
        function off(){
            //鼠标悬浮停止播放
            //停止俩计时器
            clearInterval(tim);
            clearInterval(mati);
            }
        function on(){
            //鼠标离开重启计时器,开始播放
            ti();
        }
        function add(){
            var a=document.getElementById("d1");
            i=i+1;
            magicti();//引入幻灯片效果
            clearInterval(mti);
            color(i);//停止计时器,防止计时器叠加
            if(i==5){
                i=0;
                }
        }
        function noadd(){
            var a=document.getElementById("d1");
            i=i-1;
            if(i==0){
                i=5;
                }
            magicti();//引入幻灯片效果
            clearInterval(mti);//停止计时器,防止计时器叠加
            color(i);
        }
        function color(i){
            //color()的作用在于根据展示不同的图片改变顺序点的颜色
            var d21=document.getElementById("d21");
            var d22=document.getElementById("d22");
            var d23=document.getElementById("d23");
            var d24=document.getElementById("d24");
            var d25=document.getElementById("d25");
            //以上获取那五个点
            //下面是一个switch分支结构
            switch(i){
                case 1:
                    //第一个图片,第一个点变黑,还原其他四个点的颜色,之后以此类推
        
                    d21.style.background="black";
                    d22.style.background="rgba(0,255,243,1.00)";
                    d23.style.background="rgba(0,255,243,1.00)";
                    d24.style.background="rgba(0,255,243,1.00)";
                    d25.style.background="rgba(0,255,243,1.00)";
                    break;
                case 2:
                    d21.style.background="rgba(0,255,243,1.00)";
                    d22.style.background="black";
                    d23.style.background="rgba(0,255,243,1.00)";
                    d24.style.background="rgba(0,255,243,1.00)";
                    d25.style.background="rgba(0,255,243,1.00)";
                    break;
                case 3:
                    d21.style.background="rgba(0,255,243,1.00)";
                    d22.style.background="rgba(0,255,243,1.00)";
                    d23.style.background="black";
                    d24.style.background="rgba(0,255,243,1.00)";
                    d25.style.background="rgba(0,255,243,1.00)";
                    break;
                case 4:
                    d21.style.background="rgba(0,255,243,1.00)";
                    d22.style.background="rgba(0,255,243,1.00)";
                    d23.style.background="rgba(0,255,243,1.00)";
                    d24.style.background="black";
                    d25.style.background="rgba(0,255,243,1.00)";
                    break;
                case 5:
                    d21.style.background="rgba(0,255,243,1.00)";
                    d22.style.background="rgba(0,255,243,1.00)";
                    d23.style.background="rgba(0,255,243,1.00)";
                    d24.style.background="rgba(0,255,243,1.00)";
                    d25.style.background="black";
                    break;
                   }
        }
        function magic(){
            //简单的幻灯片效果,使图片从下方滑动进入
            m=m-4;
            var d1=document.getElementById("d1");
            d1.style.backgroundPosition="0px "+m+"px";
            d1.style.backgroundRepeat="no-repeat";
            if(m==0){
                m=800;
                clearInterval(mti);
            }
        }
        function magicti(){
            //简单的幻灯片效果,使图片从下方滑动进入
            mti=setInterval("magic()",1);//每一毫秒图片向上滑动
            var d11=document.getElementById("d1");
            d1.style.background="url("+i+".jpg)";
            d1.style.backgroundRepeat="no-repeat";
        }
    </script>
       
</head>
<body>
    <div id="d1" onMouseOver="off()" onmouseleave="on()">
        <div id="d2" onMouseOver="off()" onmouseleave="on()"></div>
        <div id="d3" onMouseOver="off()" onmouseleave="on()"></div>
        <div id="d4" onMouseOver="off()" onmouseleave="on()"></div>
		<!--onMouseOver="off()"鼠标悬浮停止播放-->
		<!--onMouseOver="on()"鼠标离开开始播放-->
		<!--d1为图片展示区域-->
		<input type="button" value="<" onClick="noadd()" class="i1"><!--上一张按钮-->
		<input type="button" value=">" onClick="add()" class="i2"><!--下一张按钮-->
		<div id="d2"><!--播放顺序展示-->
			<!--五个顺序点-->
			<div id="d21" onClick=""></div>
			<div id="d22" onClick=""></div>
			<div id="d23" onClick=""></div>
			<div id="d24" onClick=""></div>
			<div id="d25" onClick=""></div>
		</div>
    </div>
</body>
</html>